<template>
  <div class="workbench-container">
    <div class="workbench-header">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <!--<van-swipe-item><img :src="'/banner.jpg'" alt=""></van-swipe-item>-->
        <van-swipe-item><img :src="'/banner1.webp'" alt=""></van-swipe-item>
        <van-swipe-item><img :src="'/banner2.webp'" alt=""></van-swipe-item>
      </van-swipe>
    </div>
    <div class="apps-container">
      <div class="app-card-item" v-for="item in apps" :key="item.path">
        <div class="app-card-item-header">{{ item.meta.title }}</div>
        <div class="app-card-item-content">
          <div class="app-item" v-for="it in item.children" :key="it.path">
              <div class="sub-title" @click="it.hiddenSub = !it.hiddenSub">
                <span>{{it.meta.title}}</span>
                <van-icon name="arrow-up"  v-if="it.hiddenSub"/>
                <van-icon name="arrow-down" v-if="!it.hiddenSub"/>
              </div>
              <div class="sub-content" :class="{active:!it.hiddenSub}">
                <div class="item" v-for="r in it.children " :key="r.path" @click="handleClickRoute(r)">
                  <div class="icon">
                    <svg-icon v-if="r.h5icon" :icon-class="r.h5icon"/>
                  </div>
                  <div class="name">{{ r.meta.title }}</div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import { onMounted, ref } from 'vue'
import { getRoutersApi } from '@/api/user.js'
import { treeToList } from '@/utils/index.js'
import { useRouter } from 'vue-router'
import SvgIcon from '@/components/icons/SvgIcon.vue'

const router = useRouter()
const apps = ref([])

const handleClickRoute = (r)=>{
  console.log(r)
  if(r.h5path){
    router.push(r.h5path)
  }
}

const init = async ()=>{
  let res = await getRoutersApi()
  if(res.code===200){
    let newArr = []
    res.data.forEach(item=>{
      if(item.meta.title==='公司级'){
        if(item.children && item.children.length>0){
          item.children = item.children.filter(it=>!it.hidden).map(it=>{
            if(it.children && it.children.length){
              it.children = treeToList(it.children).filter(r=>!r.hidden)
            }else{
              // 没有子级了,就吧本身作为子级
              it.children = [
                {
                  path:it.path,
                  meta:{
                    title:it.meta.title
                  }
                }
              ]
            }

            return it
          })
          newArr.push(item)
        }
      }else{
        // 其他的暂时不要
      }
    })
    // let gs = res.data.find(item=>item.meta.title==='公司级')
    // gs.children = treeToList(gs.children).filter(item=>!item.hidden)
    apps.value = newArr
  }
}

onMounted(()=>{
  init()
})
</script>

<style scoped lang="less">
.workbench-container{
  .workbench-header{
    height: 200px;
    background-color: #fff;

    .my-swipe {
      .van-swipe-item {
        height: 200px;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .apps-container{
    width: 100%;
    margin-top:10px;

    .app-card-item{
      margin:0 auto;
      width: calc(100% - 20px);
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      overflow: hidden;
      .app-card-item-header{
        height: 40px;
        width: 100%;
        padding:0 10px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
      }
      .app-card-item-content{
        padding:5px;
        width: 100%;
        .app-item{
          width: 100%;
          .sub-title{
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            width: 100%;
          }
          .sub-content{
            transition: all 0.3s ease-in-out;
            height: 0;
            display:none;
            .item{
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .icon{
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 50px;
              }
              .name{
                width: 100%;
                height: 16px;
                line-height: 16px;
                text-align: center;
                font-size: 10px;
              }
            }
          }
          .active{
            height:auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 2px;
          }
        }
      }
    }
  }
}
</style>